<template>
  <div
    class="model-dropdown-container"
    :style="{ maxHeight: maxHeight + 'px', minHeight: '200px' }"
  >
    <div class="search-area">
      <el-input
        v-model="query"
        :placeholder="$t('搜索')"
        clearable
      >
        <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>
    </div>
    <div class="count-area">
      <div>
        <span class="count">{{ filteredDataList.length }}</span>
        {{ $t("符合") }}
      </div>
    </div>
    <div class="list-select">
      <div class="list-select-box">
        <div
          v-for="item in filteredDataList"
          :key="item.value"
          :class="{ disabled: item.disabled, 'list-select-item': true }"
          @click="changeOption(item)"
        >
          <img
            v-if="item.icon"
            :src="item.icon"
            alt=""
            class="g-m-r-4"
          />
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, onBeforeMount, inject } from "vue";
import { Search } from "@element-plus/icons-vue";
import { SelectOption } from "../relationCriteria/types";
import { DropdownModel } from "@/common/dropdown/DropdownModel";
const dropDownModel = inject("dropdownModel") as DropdownModel;
interface Props {
  list?: SelectOption[];
  getList?: () => SelectOption[] | Promise<SelectOption[]>;
  maxHeight?: number;
}
const emit = defineEmits<{
  (e: "changeOption", option: SelectOption): void;
}>();
const changeOption = (item: any) => {
  emit("changeOption", item);
  dropDownModel.close();
};
const props = withDefaults(defineProps<Props>(), {
  maxHeight: 300,
  list: () => []
});

const query = ref("");
const dataList = ref<SelectOption[]>([]);

const filteredDataList = computed(() => {
  const searchWord = query.value.toLowerCase();
  if (query.value) {
    return dataList.value.filter(item => item.label.toLowerCase().includes(searchWord));
  }
  return dataList.value;
});

onBeforeMount(async () => {
  if (props.getList) {
    dataList.value = await props.getList();
  } else {
    dataList.value = props.list;
  }
});
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.model-dropdown-container {
  display: flex;
  flex-direction: column;
  .search-area {
    .el-input__wrapper {
      box-shadow: none;
      padding: 0 12px;
      input {
        height: 28px;
      }
      .el-input__icon {
        margin-right: 5px;
      }
    }
  }
  .count-area {
    border-top: 1px solid #d0d0d0;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #000;
    background-color: $toolbar-bg-color;
    padding-right: 8px;
    .count {
      color: $theme-color;
      margin-right: 4px;
    }
  }
  .list-select {
    flex: 1;
    overflow: auto;
    padding: 4px;
    .list-select-box {
      width: fit-content;
      min-width: 100%;
    }
    .list-select-item {
      height: 24px;
      line-height: 24px;
      padding: 0 4px;
      display: flex;
      align-items: center;
      min-width: 100%;
      white-space: nowrap;
      &:hover {
        background-color: var(--md-color-sub2);
        color: rgba(0, 0, 0, 0.85);
      }
      &.disabled {
        opacity: 0.25;
        cursor: not-allowed;
      }
    }
  }
}
</style>
